<template>
  <div style="margin-top:20px">
    <el-row style="margin-left: 20px">
      <el-input v-model="input" placeholder="请输入档案号/姓名" style="width: 300px" />&nbsp;
      <el-button icon="el-icon-search" type="primary" @click="search(input)">查 询</el-button>
    </el-row>
    <br>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
      >
        <el-table-column
          fixed
          label="档案号"
          prop="fileNumber"
        />
        <el-table-column
          label="姓名"
          prop="name"
        />
        <el-table-column
          label="性别"
          prop="sex"
        />
        <el-table-column
          label="年龄"
          prop="age"
        />
        <el-table-column
          label="手机号"
          prop="phoneNumber"
        />
        <el-table-column
          label="邮箱"
          prop="email"
        />
        <el-table-column
          label="建档时间"
          prop="regTime"
        />
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template v-slot="scope">
            <el-button icon="el-icon-edit-outline" size="small" type="primary" @click="queryhaidefan(scope.row.id)">
              制定方案
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5,10,15,20]"
        :total="totalNum"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChanage"
        @current-change="handleCurrentChange"
      />
    </div>
    <div>
      <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogTable"
        title="制定方案"
        width="80%"
      >
        <el-row>
          <el-col :lg="9" :md="8" :sm="6" :xl="11" :xs="4" style="margin-left: 40px;">
            <el-card class="box-card" style="height: 600px;width: 500px">
              <span slot="header" class="clearfix">
                <span>干预方案</span>
              </span>
              <el-tabs v-model="activeName" style="margin-top: -20px" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                  <el-descriptions column="2" title="基本信息">
                    <el-descriptions-item label="档案号">{{ tableDatasview.fileNumber }}</el-descriptions-item>
                    <el-descriptions-item label="姓名">{{ tableDatasview.name }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ tableDatasview.sex }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ tableDatasview.age }}</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions column="1">
                    <el-descriptions-item label="疾病史">{{ tablehistory.medical_History }}</el-descriptions-item>
                    <el-descriptions-item label="遗传史"> {{ tablehistory.family_History }}</el-descriptions-item>
                    <el-descriptions-item label="手术史">{{ tablehistory.past_History }}</el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="评估报告" name="third">
                  <el-table
                    v-loading="loading"
                    :data="tablepugu"
                    border
                  >
                    <el-table-column
                      fixed
                      label="档案号"
                      prop="fileNumber"
                    />
                    <el-table-column
                      label="风险评估日期"
                      prop="testTime"
                    />
                    <el-table-column
                      fixed="right"
                      label="查看"
                    >
                      <template v-slot="scope">
                        <el-button icon="el-icon-view" size="small" type="primary" @click="openapps()">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
              <div style="text-align: right" />
            </el-card>
          </el-col>
          <el-col :lg="9" :md="8" :sm="6" :xl="11" :xs="4" style="margin-left: 40px;">
            <el-card class="box-card" style="height: 600px">
              <el-form ref="form" :model="form" size="mini">
                <span slot="header" class="clearfix">
                  <span>干预方案</span>
                </span>
                <el-tabs v-model="activeNames" style="margin-top: -20px" @tab-click="handleClicks">
                  <el-tab-pane label="用户管理" name="first">
                    <el-descriptions column="2" title="基本信息">
                      <el-descriptions-item label="档案号">{{ tableDatasview.fileNumber }}</el-descriptions-item>
                      <el-descriptions-item label="姓名">{{ tableDatasview.name }}</el-descriptions-item>
                      <el-descriptions-item label="性别">{{ tableDatasview.sex }}</el-descriptions-item>
                      <el-descriptions-item label="年龄">{{ tableDatasview.age }}</el-descriptions-item>
                    </el-descriptions>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="方案标题">
                          <el-input v-model="form.headline" placeholder="请输入方案标题" style="width:200px" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="选用模板">
                          <el-select
                            v-model="form.name"
                            :loading="loading"
                            :remote-method="templateNameFind"
                            filterable
                            placeholder="请输入模版名称"
                            remote
                            reserve-keyword
                            @change="fillData"
                          >
                            <el-option
                              v-for="item in optionsTitle"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="开始日期">
                          <el-date-picker
                            v-model="form.startdate"
                            placeholder="选择开始日期"
                            style="width: 200px"
                            type="date"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="结束日期">
                          <el-date-picker
                            v-model="form.enddate"
                            placeholder="选择结束日期"
                            style="width: 200px"
                            type="date"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-form-item label="方案目标">
                        <el-input v-model="form.target" style="width: 500px;" type="textarea" />
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="执行人">
                        <el-select v-model="form.operator" placeholder="--请选择--" style="width: 200px">
                          <el-option label="区域一" value="shanghai" />
                          <el-option label="区域二" value="beijing" />
                        </el-select>
                      </el-form-item>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="饮食干预" name="second">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="推荐食品" prop="foodName">
                          <el-select
                            v-model="form.foodName"
                            :loading="loading"
                            :remote-method="foodNameFind"
                            filterable
                            multiple
                            placeholder="请输入关键词"
                            remote
                            reserve-keyword
                          >
                            <el-option
                              v-for="item in optionsFood"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="餐次" prop="meals">
                          <el-select v-model="form.meals" placeholder="--请选择--" style="width: 200px">
                            <el-option label="1餐" value="1" />
                            <el-option label="2餐" value="2" />
                            <el-option label="3餐" value="3" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="膳食份量" prop="quantity">
                          <el-input v-model="form.quantity" style="width: 550px" type="textarea" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="摄入量" prop="intake">
                          <el-input v-model="form.intake" style="width: 550px" type="textarea" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="运动干预" name="third">
                    <el-row />
                    <el-divider />
                  </el-tab-pane>
                  <el-tab-pane label="干预计划" name="fourth2" />
                </el-tabs>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
        <div style="text-align: right;margin-top: 20px;">
          <span class="dialog-footer">
            <el-button @click="queryoncloes()">取 消</el-button>
            <el-button type="primary" @click="schemesubmit()">确 定</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog :visible.sync="openapp" title="详细评估报告">
        <el-table
          v-loading="loading"
          :data="tablepugu"
          border
        >
          <el-table-column
            fixed
            label="档案号"
            prop="fileNumber"
          />
          <el-table-column
            label="风险评估日期"
            prop="testTime"
          />
          <el-table-column
            label="患者姓名"
            prop="name"
          />
          <el-table-column
            label="患者年龄"
            prop="age"
          />
          <el-table-column
            label="患者性别"
            prop="sex"
          />
          <el-table-column
            label="评测时间"
            prop="testTime"
          />
          <el-table-column
            label="评估总分"
            prop="num"
          />
          <el-table-column
            label="建议人群分类"
            prop="type"
          />
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        headline: '',
        template: '',
        startdate: '',
        enddate: '',
        target: '',
        operator: '',
        heat: '',
        exercise: '',
        communication: '',
        mealsid: [],
        m_moment: [],
        m_intake: []
      },
      mealsid1: '',
      mealsid2: '',
      mealsid3: '',
      m_moment1: '',
      m_moment2: '',
      m_moment3: '',
      m_intake1: '',
      m_intake2: '',
      m_intake3: '',
      activeName: 'first',
      activeNames: 'first',
      dialogTable: false,
      currentPage: 1,
      input: '',
      pageSize: 5,
      pageSizes: 5,
      totalNum: 10,
      totalNums: 10,
      currentPages: 1,
      tableData: [],
      tableData1: [],
      loading: false,
      tableDatasview: [],
      tablehistory: [],
      tablepugu: [],
      optionsTitle: [],
      optionsFood: [], // 用于存储食物选项列表
      optionsSports: [], // 用于存储运动选项列表
      openapp: false
    }
  },
  mounted() {
    this.queryhealt()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    handleClicks(row) {
      console.log(row)
    },
    handleSizeChanage(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogTable = false
        })
        .catch(_ => {
        })
    },
    schemesubmit() {
      const data = this.form
      console.log(data)
      this.dialogTable = false
    },
    queryhealt() {
      axios.get('api/member/findAll').then((returns) => {
        this.tableData = returns.data.data
        this.tableData1 = returns.data.data
        this.totalNum = this.tableData.length
      })
    },
    // 远程搜索运动名称
    sportsNameFind(sportsName) {
      if (sportsName !== '') {
        this.loading = true
        axios.get('api/TemplateManagement/querySportsByName', { params: { sportsName: sportsName }})
          .then(response => {
            console.log(response)
            this.optionsSports = response.data.data.map(item => ({
              value: item.sportsId,
              label: item.sportsName
            }))
            this.loading = false
          })
          .catch(error => {
            console.error(error)
            this.optionsSports = []
            this.loading = false
          })
      }
    },
    // 远程搜索食物名称
    foodNameFind(foodName) {
      if (foodName !== '') {
        this.loading = true
        axios.get('api/TemplateManagement/queryFoodByName', { params: { foodName: foodName }})
          .then(response => {
            this.optionsFood = response.data.data.map(item => ({
              value: item.foodId,
              label: item.foodName
            }))
            this.loading = false
          })
          .catch(error => {
            console.error(error)
            this.optionsFood = []
            this.loading = false
          })
      }
    },
    // 根据名称查询模版信息
    fillData() {
      console.log(this.form.name)
      axios.get('api/TemplateManagement/queryTemplateInfoByName', { params: { m_id: this.form.name }})
        .then(response => {
          console.log(response)
          this.form.headline = response.data.data.title
          this.form.target = response.data.data.target
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 远程搜索模版名称
    templateNameFind(templateName) {
      if (templateName !== '') {
        this.loading = true
        axios.get('api/TemplateManagement/queryTemplateNameByName', { params: { title: templateName }})
          .then(response => {
            console.log(response)
            this.optionsTitle = response.data.data.map(item => ({
              value: item.m_id,
              label: item.title
            }))
            this.loading = false
          })
          .catch(error => {
            console.error(error)
            this.optionsTitle = []
            this.loading = false
          })
      }
    },
    search(bool) {
      this.currentPage = 1
      if (bool) {
        this.tableData = this.tableData1
        // 前端实现模糊查询--不用对接口
        const newListData = [] // 用于存放搜索出来数据的新数组
        if (this.input) {
          this.tableData.filter((item) => {
            if (item.name.indexOf(this.input) !== -1) {
              newListData.push(item)
            }
            if (item.fileNumber === (this.input)) {
              newListData.push(item)
            }
          })
        }
        this.tableData = newListData
      } else {
        axios.get('api/member/findAll').then(res => {
          // console.log(res)
          this.tableData = res.data.data
          //   console.log(this.tableData.length)
        })
      }
    },
    queryhaidefan(id) {
      // alert(id)
      this.tablepugu = []
      this.dialogTable = true
      const data = this.tableData.find((da) => da.id === id)
      this.tableDatasview = data
      axios.post('api/member/findOne2', { id: id }).then((res) => {
        this.tablehistory = res.data.data
        this.assessment(data.fileNumber)
      })
    },
    assessment(name) {
      axios.get('api/Classify/queryriskkAssessmentByFileNumber?FileNumber=' + name).then((returns) => {
        this.tablepugu = []
        this.tablepugu.push(returns.data.data)
      })
    },
    openapps() {
      this.openapp = true
      this.tablepugu[0].num = this.tablepugu[0].zz1 + this.tablepugu[0].zz2 + this.tablepugu[0].zz3 + this.tablepugu[0].zz4 + this.tablepugu[0].zz5 + this.tablepugu[0].zz6 + this.tablepugu[0].zz7 + this.tablepugu[0].zz8 + this.tablepugu[0].zz9
    },
    queryoncloes() {
      this.tablepugu = []
      this.dialogTable = false
    }
  }
}

</script>
